<template>
    <div class="count-flop" :key="compKey">
        <div :class="item != '.' ? 'count-flop-box' : 'count-flop-point'" v-for="(item, index) in value" :key="index">
            <div v-if="item != '.'" class="count-flop-content" :class="['rolling_' + item]">
                <div v-for="(item2, index2) in numberList" :key="index2" class="count-flop-num">
                    {{ item2 }}
                </div>
            </div>
            <div v-else class="count-flop-content">.</div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "count-flop",
        data() {
            return {
                value: [],
                numberList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
                compKey: 0,
            };
        },
        props: {
            val:{
                type:[Number,String],
                default:''
            },
            length:{
                type:[Number,String],
                default:6
            }
        },
        watch: {
            val(v) {
                if (v) {
                    this.value = v.toString().split("");
                    this.initVal()
                    this.compKey += 1;
                }
            },
            length(v) {
                if (v) {
                    this.value = v.toString().split("");
                    this.initVal()
                    this.compKey += 1;
                }
            },
        },
        methods:{
          initVal(){
                try {
                    let number = this.length - this.value.length
                    if (number > 0) {
                        for (let i = 0; i < number; i++) {
                            this.value.unshift(' ')
                        }
                    }

                } catch (error) {
                    console.log(error)
                }
          },
        },
        created() {
            if (this.val) {
                this.value = this.val.toString().split("");
                this.initVal()
            }
        },
    };
</script>
<style scoped lang='scss'>
    .count-flop {
        display: inline-block;
        /* 可更改 */
        height: 48px;
        line-height: 48px;

        /* background: linear-gradient(0deg, #00a2ff 0%, #ffffff 100%); */
        font-size: 27px;
        /* font-family: Furore, Furore-mk-Regular; */
        /* font-weight: 400; */
        color: rgba(255, 255, 255, 1);
        border-radius: 100px;
        font-weight: 700;
        /* text-shadow: 0 0 10px #00a2ff, 0 0 20px #00a2ff, 0 0 10px #00a2ff, 0 0 30px #00a2ff; */
    }

    .count-flop>div {
        position: relative;
        display: inline-block;
        overflow: hidden;
        height: 100%;
    }

    .count-flop-box {
        /* 可更改 */
        margin-right: 8px;
        width: 35px;
        line-height: 48px;
        background-image: url('~@/assets/images/licang/szk.png');
        background-size: 100% 100%;
        /* opacity: 0.8; */
        /* background: rgba(1, 17, 39, 0.07);
        border: 1px solid;
        border-image: linear-gradient(0deg, rgba(255, 255, 255, 0.22) 0%, #ffffff 100%) 1 1; */
        /* border-radius: 4px; */
        /* clip-path: inset(0 round 6px); */
    }

    .count-flop-point {
        /* 可更改 */
        margin-right: 5px;
        width: 10px;
    }

    .count-flop-content {
        /* font-family: Furore, Furore-mk-Regular; */
        text-align: center;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        animation-fill-mode: forwards !important;
    }

    .rolling_0 {
        animation: rolling_0 2.1s ease;
    }

    @keyframes rolling_0 {
        from {
            transform: translateY(-90%);
        }

        to {
            transform: translateY(0);
        }
    }

    .rolling_1 {
        animation: rolling_1 3s ease;
    }

    @keyframes rolling_1 {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-10%);
        }
    }

    .rolling_2 {
        animation: rolling_2 2.1s ease;
    }

    @keyframes rolling_2 {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-20%);
        }
    }

    .rolling_3 {
        animation: rolling_3 3s ease;
    }

    @keyframes rolling_3 {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-30%);
        }
    }

    .rolling_4 {
        animation: rolling_4 2.1s ease;
    }

    @keyframes rolling_4 {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-40%);
        }
    }

    .rolling_5 {
        animation: rolling_5 3s ease;
    }

    @keyframes rolling_5 {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-50%);
        }
    }

    .rolling_6 {
        animation: rolling_6 2.1s ease;
    }

    @keyframes rolling_6 {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-60%);
        }
    }

    .rolling_7 {
        animation: rolling_7 3.1s ease;
    }

    @keyframes rolling_7 {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-70%);
        }
    }

    .rolling_8 {
        animation: rolling_8 2.1s ease;
    }

    @keyframes rolling_8 {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-80%);
        }
    }

    .rolling_9 {
        animation: rolling_9 3.6s ease;
    }

    @keyframes rolling_9 {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-90%);
        }
    }
</style>